<template>
	<view>
		<!-- 用户自定义头像 -->
		<view class="userPortrait" style="padding-top:30px; text-align: center;">
			<image :src="wechatAvatarUrl" class="logo-img" style="width: 100px; height:100px;" mode="widthFix"></image>
		</view>
		<!-- 用户自定义名字 -->
		<view class="userLook" style="padding-top:30px; text-align: center;">
			<view class="user-title clamp">{{wechatNickname}}</view>
		</view>
		<view class="userLook" style="padding-top:30px; text-align: center;" v-show="!isShow">
			<button type='primary' style="width: 90%;" withCredentials="true" lang="zh_CN"
				@click="open">授权微信</button>
		</view>

		<view class="userLook" style="padding-top:30px; text-align: center;" v-show="isShow">
			<button type='primary' style="background-color: red; width: 90%;" withCredentials="true" lang="zh_CN"
				@click="unWeixin">解除绑定</button>
		</view>

<!-- 		<view>
			<button type='primary' open-type="getUserProfile2" style="width: 90%;" withCredentials="true" lang="zh_CN"
				@click="getUserProfile2">授权微信2</button>
			<button @click="getUserProfile2"> 获取头像昵称 </button>
		</view> -->
		
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view>
				<view style="padding-top:10px; padding-bottom: 10px; padding-left: 20px;">
					<view>获取您的昵称、头像</view>
				</view>
				<view class="logo">
					<image :src="userInfo.avatarUrl" class="logo-img" mode="widthFix"></image>
				</view>
				<!-- 微信昵称 -->
				<view style="padding-top:10px; padding-bottom: 10px; text-align: center;">
					<view>{{userInfo.nickName}}</view>
				</view>
				<view style="height: 50px;">
					<uni-row>
						<uni-col :span="12">
							<view>
								<button @click="close" style="width: 90%;">取消</button>
							</view>
						</uni-col>
						<uni-col :span="12">
							<view>
								<button @click="sumb()" type='primary' style="width: 90%; background-color:lime;">允许</button>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script lang="ts">
	import { getUsersByID } from "../user/api";
	import { bindWeixin, wechatOnlineTranslation } from "./api";
	import { Toast } from '@/utils/uniHooks/toast';
	import Storage from "@/utils/storageCache";

	export default {
		onShow: function() {
			let users = Storage.get("userInfo");
			this.userId = users.userId;
			this.getErpUserInfo( this.userId );
		},
		data() {
			return {
				isShow: false,
				userInfo: {},
				nvueWidth: 730,
				wechatAvatarUrl: '../../static/images/avatar.png',
				wechatNickname: '未绑定',
				wechatOpenId: '',
				userId:'',
			}
		},

		methods: {
			open() {
				this.getUserProfile2();
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			sumb(){
				this.thisBindWeixin();
			},
			async thisBindWeixin(){
				if(this.userInfo.openId){
					await bindWeixin({ 
						userId: this.userId,
						openId: this.userInfo.openId,
						nickName: this.userInfo.nickName,
						wechatAvatarUrl: this.userInfo.avatarUrl,
					});
					Toast("微信绑定成功！");
				}else{
					Toast("获取微信信息失败！");
				}
				this.getErpUserInfo( this.userId );
				this.$refs.popup.close();
			},
			async getErpUserInfo(userId){
				 await getUsersByID(userId).then(res=>{
					 if (typeof res.data.wechatOpenId == "undefined" || res.data.wechatOpenId == '' || res.data.wechatOpenId == null) {
					 	this.wechatAvatarUrl = '../../static/images/avatar.png';
					 	this.wechatNickname = '未绑定';
					 	this.wechatOpenId = '';
					 	this.isShow = false;
					 } else {
					 	this.wechatAvatarUrl = res.data.wechatAvatarUrl;
					 	this.wechatNickname = res.data.wechatNickname;
					 	this.wechatOpenId = res.data.wechatOpenId;
					 	this.isShow = true;
					 }
				 });
			},
			getUserProfile2(e) {
				let _that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						wx.getUserProfile({
							desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
							success: (res) => {
								//用户信息，微信头像，昵称等等
								_that.userInfo = res.userInfo;
								console.log(_that.userInfo);
							},
							// 接口调用失败回调函数
							fail: (res) => {},
							// 接口调用完成回调函数
							complete: () => {},
						})
					}
				})
			},
			unWeixin(){
				this.unWeixinOpenid( this.userId );
				console.log("userId = " + this.userId);
			},
			async unWeixinOpenid(id){
				console.log("userId = " + id);
				await wechatOnlineTranslation(id).then(res=>{
					 if(res){
						 Toast("微信解绑成功！");
						 this.getErpUserInfo( id );
					 }else{
						 Toast("微信解绑失败！");
					 }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		box-sizing: border-box;
		background-color: #ffffff;
		flex-direction: row;
		align-items: flex-start;
		text-align: center;
		margin-top: 10px;
	}

	.logo-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 150rpx;
	}

	.uer-name {
		height: 60rpx;
		line-height: 60rpx;
		color: #000000;
	}

	.user-info {
		float: left;
		margin-left: 80rpx;
		padding-top: 40rpx;
	}
</style>
